<template>
    <div class="page_container">
        <div class="page_container_scroll">
            <a-card :bordered="false" class="pb-0 mb-2">
                <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState"
                    class="ant-advanced-search-form">
                    <a-row :gutter="24" style="padding: 0px;">
                        <a-col :span="6">
                            <a-form-item label="项目名称" name="name">
                                <a-input v-model:value="searchFormState.name" placeholder="请输入项目名称" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item label="项目编号" name="code">
                                <a-input v-model:value="searchFormState.code" placeholder="请输入项目编号" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item label="负责人" name="director">
                                <a-input v-model:value="searchFormState.director" placeholder="请输入项目经理" />
                            </a-form-item>
                        </a-col>
                        <!-- <a-col :span="6">
                        <a-form-item label="客户名称" name="custom">
                            <a-input v-model:value="searchFormState.custom" placeholder="请输入客户名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="项目经理" name="director">
                            <a-input v-model:value="searchFormState.director" placeholder="请输入项目经理" />
                        </a-form-item>
                    </a-col> -->
                        <a-col :span="6">
                            <a-form-item label="项目进度" name="phase">
                                <a-select :getPopupContainer="trigger => trigger.parentNode" ref="select" v-model:value="searchFormState.phase"
                                    :options="progressOptions"></a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item label="项目类型" name="type">
                                <a-select :getPopupContainer="trigger => trigger.parentNode" ref="select" v-model:value="searchFormState.type"
                                    :options="xmtypes"></a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item label="投标类型" name="type">
                                <a-select :getPopupContainer="trigger => trigger.parentNode" ref="select" v-model:value="searchFormState.bidType"
                                    :options="tbtypes"></a-select>
                            </a-form-item>
                        </a-col>
                        <!-- <a-col :span="6">
                        <a-form-item label="立项时间" name="type">
                            <a-range-picker valueFormat="YYYY-MM-DD hh:mm:ss" v-model:value="searchFormState.createDate"
                                style="width: 100%;" />
                        </a-form-item>
                    </a-col> -->
                        <a-col :span="6">
                            <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
                            <a-button style="margin: 0 8px" @click="reset">重置</a-button>
                        </a-col>
                    </a-row>
                </a-form>
            </a-card>
            <a-card :bordered="false">
                <s-table :tool-config="toolConfig" :scroll="{ x: 1300, }" ref="tableRef" :data="loadData" bordered
                    :columns="columns" class="mb-2">

                    <template #operator class="table-operator">
                        <div style="display: flex; justify-content: space-between">
                            <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="searchFormState.role" style="width: 120px" :options="roles"
                                :fieldNames="{ label: 'label', value: 'value' }" placeholder="本人">
                            </a-select>
                        </div>
                    </template>
                    <template #bodyCell="{ column, record, index }">
                        <template v-if="column.key === 'index'">
                            {{ index + 1 }}
                        </template>
                        <template v-if="column.key === 'type'">
                            {{ xmtypes.find(x => x.value == record.type)?.label }}
                        </template>
                        <template v-if="column.key === 'bidType'">
                            {{ tbtypes.find(x => x.value == record.bidType)?.label }}
                        </template>
                        <template v-if="column.key === 'phase'">
                            {{ progressOptions.find(x => x.value == record.phase)?.label }}
                        </template>
                        <template v-if="column.key === 'durationExpect'">
                            {{ record.durationExpect + ' %' }}
                        </template>
                        <template v-if="column.key === 'stateText'">
                            <stateTag :value="record.stateText" />
                        </template>
                        <template v-if="column.key === 'control'">
                            <div>
                                <a @click="pminfoOnOpen(record)">查看</a>
                            </div>
                        </template>
                    </template>
                </s-table>
            </a-card>
            <pminfo ref="pminfoModel" @OnClose="pminfoOnClose" :id="100"></pminfo>
        </div>
    </div>
</template>

<script setup name="steps">
import stateTag from '@/components/Task/stateTag.vue'
import pmApi from '@/api/pm/pm/index'
import pminfo from './components/info.vue'
import { progressOptions, roles, tbtypes, xmtypes } from '@/utils/constants.js'
const tableRef = ref()
const showFliter = ref(false)
const pminfoModel = ref()
const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
const searchFormState = ref({
})
// 查询区域显示更多控制
const advanced = ref(false)
const toggleAdvanced = () => {
    advanced.value = !advanced.value
}
const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 70,
        align: 'center'
    },
    {
        title: '项目编号',
        dataIndex: 'code',
        key: 'code',
        width: 150,
        align: 'center'
        , ellipsis: true
    },
    {
        title: '项目名称',
        dataIndex: 'name',
        key: 'name',
        width: 180,
        align: "center",

    },
    {
        title: '项目类型',
        dataIndex: 'type',
        key: 'type',
        width: 120,
        align: "center",
    },
    {
        title: '立项时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 150,
        align: "center",
    },

    {
        title: '立项状态',
        dataIndex: 'stateText',
        key: 'stateText',
        width: 120,
        align: "center",
    },


    {
        title: '客户名称',
        dataIndex: 'custom',
        key: 'custom',
        width: 120,
        align: "center",
        ellipsis: true
    },

    {
        title: '项目阶段',
        dataIndex: 'phase',
        key: 'phase',
        width: 120,
        align: "center",
    },
    {
        title: '项目经理',
        dataIndex: 'directorName',
        key: 'directorName',
        width: 120,
        align: "center",

    },
    {
        title: '项目预算',
        dataIndex: 'budgetAmount',
        key: 'budgetAmount',
        width: 120,
        align: "center",
    },
    {
        title: '合同金额',
        dataIndex: 'esAmount',
        key: 'esAmount',
        width: 120,
        align: "center",
    },

    {
        title: '实际成本',
        dataIndex: 'actualCost',
        key: 'actualCost',
        width: 120,
        align: "center",
    },
    {
        title: '预算偏差率',
        dataIndex: 'durationExpect',
        key: 'durationExpect', width: 120,
        align: "center",
    },

    {
        title: '操作',
        dataIndex: 'control',
        key: 'control',
        width: 120,
        align: "center",
        fixed: "right"
    },
]

const reset = () => {
    searchFormState.value = {}
}
const loadData = (parameter) => {
    console.log('loadData.parameter', parameter)
    searchFormState.value.current = parameter.current
    searchFormState.value.size = parameter.size
    return pmApi.proinfopage(searchFormState.value).then((res) => {
        return res
    })
}





const remove = (record) => {
    pmApi.proinfodelete([{ "id": record.id }]).then(() => {
        tableRef.value.refresh(true)
    })
    console.log("remove id", record)
}
const pmedit = ref()
const pmdata = ref([])
const onOpen = (record) => {
    pmdata.value = record;
    pmedit.value.show(record)
}


const add = () => {
    pmdata.value = null;
    pmedit.value.show()
}

const OnClose = (refresh) => {
    if (refresh) {
        tableRef.value.refresh(true)
    }
}


const pminfoOnOpen = (record) => {
    pminfoModel.value.show(record)
}
const pminfoOnClose = () => {
    console.log("pminfo is close");


}
</script>
<style scoped></style>
